<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <p>商家信息</p>
        </header>

        <!-- 商家logo部分 -->
        <div class="business-logo">
            <img :src="shop_msg.picture">
        </div>

        <!-- 商家信息部分 -->
        <div class="business-info">
            <h1>{{shop_msg.name}}</h1>
            <p>&#165;0起送 &#165;{{shop_msg.dprice}}配送</p>
            <!--            <p>{{business.businessExplain}}</p>-->
        </div>

        <!-- 食品列表部分 -->
        <ul class="food" v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <li v-for="(item,index) in foodArr">
                <div class="food-left">
                    <img :src="item.picture">
                    <div class="food-left-info">
                        <h3>{{item.name}}</h3>
                        <p>{{item.type}}</p>
                        <p>&#165;{{item.price}}</p>
                    </div>
                </div>
                <div class="food-right">
                    <div>
                        <i class="fa fa-minus-circle" @click="minus(index)"></i>
                    </div>
                    <p><span>{{item.quantity}}</span></p>
                    <div>
                        <i class="fa fa-plus-circle" @click="add(index)"></i>
                    </div>
                </div>
            </li>
        </ul>

        <!-- 购物车部分 -->
        <div class="cart">
            <div class="cart-left">
                <div class="cart-left-icon"
                     :style="totalnum==0?'background-color:#505051;':'background-color:#3190E8;'">
                    <i class="fa fa-shopping-cart"></i>
                    <div class="cart-left-icon-quantity" v-show="totalnum!=0">{{totalnum}}</div>
                </div>
                <div class="cart-left-info">
                    <p>&#165;{{totalprice}}</p>
                    <p>另需配送费{{shop_msg.dprice}}元</p>
                </div>
            </div>
            <div class="cart-right">
                <!-- 不够起送费 -->
                <!--                <div class="cart-right-item" v-show="totalSettle<business.starPrice"-->
                <!--                     style="background-color: #535356;cursor: default;">-->
                <!--                    &#165;{{business.starPrice}}起送-->
                <!--                </div>-->
                <!-- 达到起送费 -->
                <div class="cart-right-item" v-show="totalnum>0" @click="toOrder">
                    去结算
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'BusinessInfo',
        data() {
            return {
                businessId: this.$route.query.businessId,
                business: {},
                foodArr: [],
                user: {},
                shopLogo: "",
                shop_msg: null,
                totalnum: 0,
                totalprice: 0,
                loading: true
            }
        },
        created() {

            this.shop_msg = JSON.parse(sessionStorage.getItem('shop_msg'))
            this.user = JSON.parse(sessionStorage.getItem('user'))

            let shopCard = JSON.parse(localStorage.getItem('shop_cart'))
            //购物车为空
            let url_shop = "/dish/" + this.$route.query.businessId
            this.$ajax_(url_shop, null, 'get').then(res => {
                res.data.list.map(e => {
                    e.quantity = 0
                })
                this.foodArr = res.data.list
                if (this.judgeShopCard()) {
                    try {
                        for (var i = 0; i < shopCard.goods.length; i++) {
                            if (shopCard.goods[i].id === this.foodArr[i].id) {
                                this.foodArr[i] = shopCard.goods[i]
                            }
                        }
                        this.totalprice = shopCard.totalprice
                        this.totalnum = shopCard.totalnum
                    } catch (e) {
                        this.totalprice = 0
                        this.totalnum = 0
                        console.log(e)
                    }

                }
                this.loading = false
            })

        },
        methods: {
            judgeShopCard() {
                let shopCard = JSON.parse(localStorage.getItem('shop_cart'))
                console.log(shopCard)
                if (shopCard === null || shopCard.totalprice === 0) {
                    return false
                }
                return true
            },
            async findAll() {
                let url_shop = "/dish/" + this.$route.query.businessId
                const res_s = await this.$ajax_(url_shop, null, 'get')
                res_s.data.list.map(e => {
                    e.quantity = 0
                })
                this.foodArr = res_s.data.list
                // console.log(this.foodArr)
            },
            add(index) {
                //首先做登录验证
                if (this.user == null) {
                    this.$router.push({path: '/login'});
                    return;
                }
                //购物车总数加一
                this.totalnum += 1
                this.foodArr[index].quantity += 1
                this.totalprice += this.foodArr[index].price
                this.updateShopCart()
            },
            updateShopCart() {
                let shopCard = {
                    goods: this.foodArr,
                    totalprice: this.totalprice,
                    totalnum: this.totalnum
                }
                localStorage.setItem('shop_cart', JSON.stringify(shopCard))
            },
            //减小
            minus(index) {
                //首先做登录验证
                if (this.user == null) {
                    this.$router.push({path: '/login'});
                    return;
                }
                // console.log(this.foodArr[index].quantity)
                if (this.foodArr[index].quantity >= 1) {
                    //做update
                    this.totalnum -= 1
                    this.totalprice -= this.foodArr[index].price
                    this.foodArr[index].quantity -= 1
                    this.updateShopCart()
                }
            },
            //到结算页面
            toOrder() {
                this.$router.push({path: '/orders', query: {businessId: this.$route.query.businessId}});
            }
        },
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 商家logo部分 ******************/
    .wrapper .business-logo {
        width: 100%;
        height: 35vw;
        /*使用上外边距避开header部分*/
        margin-top: 12vw;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper .business-logo img {
        width: 40vw;
        height: 30vw;
        border-radius: 5px;
    }

    /****************** 商家信息部分 ******************/
    .wrapper .business-info {
        width: 100%;
        height: 20vw;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .wrapper .business-info h1 {
        font-size: 5vw;
    }

    .wrapper .business-info p {
        font-size: 3vw;
        color: #666;
        margin-top: 1vw;
    }

    /****************** 食品列表部分 ******************/
    .wrapper .food {
        width: 100%;
        /*使用下外边距避开footer部分*/
        margin-bottom: 14vw;
    }

    .wrapper .food li {
        width: 100%;
        box-sizing: border-box;
        padding: 2.5vw;
        user-select: none;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .food li .food-left {
        display: flex;
        align-items: center;
    }

    .wrapper .food li .food-left img {
        width: 20vw;
        height: 20vw;
    }

    .wrapper .food li .food-left .food-left-info {
        margin-left: 3vw;
    }

    .wrapper .food li .food-left .food-left-info h3 {
        font-size: 3.8vw;
        color: #555;
    }

    .wrapper .food li .food-left .food-left-info p {
        font-size: 3vw;
        color: #888;
        margin-top: 2vw;
    }

    .wrapper .food li .food-right {
        width: 16vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .food li .food-right .fa-minus-circle {
        font-size: 5.5vw;
        color: #999;
        cursor: pointer;
    }

    .wrapper .food li .food-right p {
        font-size: 3.6vw;
        color: #333;
    }

    .wrapper .food li .food-right .fa-plus-circle {
        font-size: 5.5vw;
        color: #0097EF;
        cursor: pointer;
    }

    /****************** 购物车部分 ******************/
    .wrapper .cart {
        width: 100%;
        height: 14vw;

        position: fixed;
        left: 0;
        bottom: 0;

        display: flex;
    }

    .wrapper .cart .cart-left {
        flex: 2;
        background-color: #505051;
        display: flex;
    }

    .wrapper .cart .cart-left .cart-left-icon {
        width: 16vw;
        height: 16vw;
        box-sizing: border-box;
        border: solid 1.6vw #444;
        border-radius: 8vw;
        background-color: #3190E8;
        font-size: 7vw;
        color: #fff;

        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: -4vw;
        margin-left: 3vw;

        position: relative;
    }

    .wrapper .cart .cart-left .cart-left-icon-quantity {
        width: 5vw;
        height: 5vw;
        border-radius: 2.5vw;
        background-color: red;
        color: #fff;
        font-size: 3.6vw;

        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        right: -1.5vw;
        top: -1.5vw;
    }

    .wrapper .cart .cart-left .cart-left-info p:first-child {
        font-size: 4.5vw;
        color: #fff;
        margin-top: 1vw;
    }

    .wrapper .cart .cart-left .cart-left-info p:last-child {
        font-size: 2.8vw;
        color: #AAA;
    }

    .wrapper .cart .cart-right {
        flex: 1;
    }

    /*达到起送费时的样式*/
    .wrapper .cart .cart-right .cart-right-item {
        width: 100%;
        height: 100%;
        background-color: #38CA73;
        color: #fff;
        font-size: 4.5vw;
        font-weight: 700;
        user-select: none;
        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
    /*
    .wrapper .cart .cart-right .cart-right-item{
        width: 100%;
        height: 100%;
        background-color: #535356;
        color: #fff;
        font-size: 4.5vw;
        font-weight: 700;
        user-select: none;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    */
</style>
